<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <div th:include="/layout/head :: head"></div>
    <script language="JavaScript" src="/assets/js/jquery-1.11.1.min.js"></script>
    <script language="JavaScript" src="/assets/bootstrap/js/bootstrap.min.js"></script>
    <script language="javascript" src="/extend/js/bootbox.min.js"></script>
    <script language="javascript" src="/extend/js/common.js"></script>
    <script language="javascript" src="/extend/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script language="JavaScript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

    <script language="javascript" type="application/javascript" xmlns:th="http://www.w3.org/1999/xhtml"
            th:inline="javascript">
        function showChart(containerid, bigtitle, ytitle, eachtitle, categories, xvalues) {
            $('#' + containerid).highcharts({
                chart: {
                    type: 'column',
                    margin: [50, 50, 100, 80]
                },
                title: {
                    text: bigtitle
                },
                xAxis: {
                    categories: categories,
                    labels: {
                        rotation: -45,
                        align: 'right',
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Microsoft Yahei'
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: ytitle
                    }
                },
                legend: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: eachtitle + ': <b>{point.y:.1f}</b>',
                },
                series: [{
                    name: 'Population',
                    data: xvalues,
                    dataLabels: {
                        enabled: true,
                        rotation: 0,
                        color: '#FFFFFF',
                        align: 'right',
                        x: 4,
                        y: 10,
                        style: {
                            fontSize: '13px',
                            fontFamily: 'Microsoft Yahei',
                            textShadow: '0 0 3px black'
                        }
                    }
                }]
            });
        }


        function search() {
            var appId = $("#appId").val().trim();
            var date = $("#date").val().trim();
            var errorLevel = $("#errorLevel").val().trim();
            if (appId == undefined || appId == '') {
                alertDialog("请选择一个应用编号!");
            }
            if (date == undefined || date == '') {
                alertDialog("请输入一个日期！");
            }
            if (errorLevel == undefined || errorLevel == '') {
                alertDialog("请选择一个异常类型！");
            }
            /*<![CDATA[*/
            $.ajax({
                type: 'POST',

                url: '/exception/chart?appId=' + appId + '&date=' + date + '&errorLevel=' + errorLevel,

                async: true,
                dataType: "json",
                beforeSend: function () {

                }
                ,
                success: function (json) {
                    var categories = [];
                    var xvalues = [];
                    for (var key in json) {
                        var value = json[key];
                        categories.push(key);
                        xvalues.push(value);
                    }
                    showChart('chart', '异常数量分布', '异常个数', '共有异常数', categories, xvalues);
                }
                ,
                error: function () {
                    alertDialog("加载数据出现异常！");
                }
            })
            ;
            /*]]>*/
        }
    </script>
</head>
<body>

<div th:include="/layout/navbar :: navbar"></div>


<div class="container" style="margin-top: 50px;">
    <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading">
            异常统计 <span class="text-danger"></span>
        </div>
        <div class="panel-body">
            <div class="col-lg-12">
                <div class="input-group">
                    <select class="selectpicker show-tick form-control" data-live-search="true" data-width="280px"
                            id="appId" name="appId" th:remove="all-but-first">
                        <option th:each="entry : ${appIdMap.entrySet()}"
                                th:value="${entry.key}" th:text="${entry.value}"
                                th:selected="${#strings.equals(#httpServletRequest.getParameter('appId'),entry.key)}"></option>
                    </select>
                    <select class="form-control" id="errorLevel" name="errorLevel" th:remove="all-but-first">
                        <option th:each="entry : ${errorLevelMap.entrySet()}"
                                th:value="${entry.key}" th:text="${entry.value}"
                                th:selected="${#strings.equals(#httpServletRequest.getParameter('errorLevel'),entry.key)}"></option>
                    </select>

                    <input id="date" name="date" type="text" class="form-control form_date"
                           placeholder="日期"/>


                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="search();"><span
                            class="glyphicon glyphicon-search"
                            aria-hidden="true"></span>查 询
                    </button>
                    </span>
                </div>
            </div>

        </div>

    </div>

    <div id="chart" style="min-width:800px;height:400px"></div>
</div>
<script language="javascript" src="/extend/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script language="javascript"
        src="/extend/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script language="javascript"
        src="/extend/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker-extension.js"></script>
</body>
</html>
